<template>
  <div class="app-container">
    <el-input style='width:340px;' prefix-icon="el-icon-document" v-model="filename"></el-input>
    <el-button style='margin-bottom:20px' type="primary" icon="document"
               v-if="hasPermission('article:list')"
               @click.native.prevent="showChooseDialog">selectedExport
    </el-button>

    <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row
              @selection-change="handleSelectionChange"
              ref="multipleTable">
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column align="center" label='Id' width="95">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column label="Title" align="center">
        <template slot-scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <el-tag>{{scope.row.author}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="Readings" width="115" align="center">
        <template slot-scope="scope">
          {{scope.row.pageviews}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="PDate" width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.display_time}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <el-dialog title="addrow"
               :visible.sync="dialogFormVisible">
      <el-form status-icon class="small-space" label-position="left" label-width="75px"
               style="width: 300px; margin-left:50px;">

          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedRows" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="row in rowList" :label="row" :key="row">{{row}}</el-checkbox>
          </el-checkbox-group>

        <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">
          selectedExport</el-button>

      </el-form>

    </el-dialog>

  </div>
</template>

<script>
  import { fetchList } from '@/api/article'

  const rowListOptions = ['id', 'title', 'author', 'pageviews', 'display_time']

  export default {

    name: 'selectExcel',
    data() {
      return {
        list: [],
        listLoading: true,
        multipleSelection: [],
        checkAll: false,
        checkedRows: ['id', 'title', 'author', 'pageviews', 'display_time'],
        rowList: rowListOptions,
        isIndeterminate: true,
        dialogFormVisible: false,
        downloadLoading: false,
        filename: ''
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          console.log(response.data.list)
          this.list = response.data.list
          this.listLoading = false
        })
      },
      /**
       * 显示新增角色对话框
       */
      showChooseDialog() {
        this.dialogFormVisible = true
      },
      handleCheckAllChange(val) {
        this.checkedRows = val ? rowListOptions : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange(value) {
        const checkedCount = value.length
        this.checkAll = checkedCount === this.rowList.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.rowList.length
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleDownload() {
        if (this.multipleSelection.length) {
          this.downloadLoading = true
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = this.checkedRows
            const filterVal = this.checkedRows
            const list = this.multipleSelection
            const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.filename
            })
            this.$refs.multipleTable.clearSelection()
            this.downloadLoading = false
          })
        } else {
          this.$message({
            message: 'Please select at least one item',
            type: 'warning'
          })
        }
        this.dialogFormVisible = false
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    }
  }
</script>
